<template>
  <div class="cartBox" @click="goDetail" :class="{active:isLang}" :style="{backgroundImage:'url(' + bgImg + ')'}">
    <!--      上传图片-->

    <p v-if="!company" style="font-size: 38rpx;margin:20rpx 0 30rpx 0;white-space:nowrap;overflow: hidden;text-overflow: ellipsis;">公司/单位</p>
    <p v-if="company" style="font-size: 38rpx;margin:20rpx 0 30rpx 0;white-space:nowrap;overflow: hidden;text-overflow: ellipsis;">{{company}}</p>
    <div class="weui-uploader__bd" style="display: flex;justify-content: space-between;overflow: inherit" >
    <div class="weui-uploader__bd" style="width:28%;overflow: inherit" >
      <ul class="weui-uploader__files" id="uploaderFiles" >
<!--        <li class="weui-uploader__file weui-uploader__file_status" v-for="(item,index) in images" :key="index"  v-if="images.length" :style="{backgroundImage:'url('+item+')'}" @click="handleImagePreview('',index)">-->
<!--           <van-icon name="close" color="#1989FA" @click="deleteImg(index)" size="16" style="position: absolute;bottom:106rpx;left: 0;"/>-->
<!--          &lt;!&ndash;            <div class="weui-uploader__file-content" @click="remove(index)">&ndash;&gt;-->
<!--          &lt;!&ndash;              <i class="weui-icon-warn"></i>&ndash;&gt;-->
<!--          &lt;!&ndash;            </div>&ndash;&gt;-->
<!--        </li>-->
        <li class="weui-uploader__file weui-uploader__file_status"   v-if="images" :style="{backgroundImage:'url('+images+')'}" @click="handleImagePreview('',index)">
          <van-icon name="close" color="red" @click="deleteImg(index)" size="50rpx" style="position: absolute;top:-16rpx;right: -20rpx;background: #fff;border-radius: 50%;"/>
          <!--            <div class="weui-uploader__file-content" @click="remove(index)">-->
          <!--              <i class="weui-icon-warn"></i>-->
          <!--            </div>-->
        </li>



      </ul>
      <div class="weui-uploader__input-box" v-if="!images" @click="upload">
<!--        <input id="uploaderInput" @click="upload" class="weui-uploader__input" type="file" accept="image/*" multiple="">-->
      </div>
    </div>

    <div style="box-sizing:border-box;padding-left: 40rpx;width: 70%">
    <div class="cart_top">
<!--      <div class="cart_name">-->

        <p style="font-family: 'KaiTi';color: #fff;font-weight: normal;margin-bottom:22rpx;margin-top:10rpx;font-size: 45rpx;" v-if="!name">姓名</p>
        <p style="font-family: 'KaiTi';color: #fff;font-weight: normal;margin-bottom:22rpx;margin-top:10rpx;font-size: 45rpx;" v-if="name">{{name}}</p>
        <p style="color: #fff;font-weight: normal;display: flex;font-size: 35rpx;justify-content: space-between;align-items: center;box-sizing: border-box;padding-right: 24rpx;" >
          <span v-if="mobile">{{mobile}}</span>
          <span v-if="!mobile">电话</span>
          <img style="width:23px;height:23px;color: #fff" @click.stop="callPhone(data.mobile)" src="../icons/svg/phone.svg"/>
        </p>

<!--        <p style="margin-bottom: 10rpx;" v-if="!position">职务/部门</p>-->
<!--        <p style="margin-bottom: 10rpx;" v-if="position">{{position}}</p>-->

<!--    s-->
      <!--        <img src="../../../static/images/user.png" alt="">-->


    </div>
    </div>
    </div>
    <div class="cart_bt"  style="margin-top:22rpx;" v-if="isLang">
      <ul class="list">
        <li style="color: #fff">
          <img style="font-size: 38px;color: #fff" src="../icons/svg/location.svg"/>
          <span v-if="!address">暂未填写公司地址</span>
          <span v-if="address">{{address}}</span>
        </li>
        <li style="color: #fff">
          <img style="font-size: 32px;color: #fff" src="../icons/svg/email.svg"/>
          <span style="font-weight: bold;font-size: 30rpx;" v-if="!email">暂未填写邮箱</span>
          <span style="font-weight: bold;font-size: 30rpx;" v-if="email">{{email}}</span>
        </li>

        <li style="color: #fff">
          <img style="width:20px;height:20px;color: #fff" src="../icons/svg/chuanzhen.svg"/>
          <span style="font-weight: bold;font-size: 30rpx;" v-if="!fax">暂未填写传真</span>
          <span style="font-weight: bold;font-size: 30rpx;" v-if="fax">{{fax}}</span>
        </li>
      </ul>
    </div>
      <van-icon :name="isLang?'arrow-up':'arrow-down'" />
  </div>
</template>

<script>
  import * as host from "../utils/api"
  export default {
    name: "mb2",
    props:['name','address','company','email','fax','mobile','position','images','bgImg'],
    data(){
      return {
          backgroundImg:"https://img.xbdzmp.com/20200428111831d75990ae5f0b.jpg ",
          isLang:false,
        // images:[],
      }
    },
    onShow(){
        // console.log(this.imageArr)
      // this.images=this.imageArr
    },
    // watch:{
    //   bgImg:{
    //     handler(a,b){
    //       if(a){
    //         this.backgroundImg=a;
    //         console.log(a)
    //       }else{
    //         this.backgroundImg="https://img.xbdzmp.com/20200112010646ebd5b6556012.jpg"
    //       }
    //
    //     }
    //   }
    // },
    // mounted() {
    //     console.log(this.imageArr)
    //
    // },
    //   watch:{
    //       imageArr:{
    //           handler(a,b){
    //               this.images=a;
    //               console.log(a)
    //           },
    //           deep:true
    //       }
    //   },
    methods:{
        goDetail () {
            this.isLang=!this.isLang;

        },
        init(data,bgImg){

            this.images=data;


            this.$forceUpdate();
        },
      deleteImg(index){
          this.images="";
        this.$emit('getLogo',"")
      },
      handleImagePreview(img,index){//预览图片
        const idx =index
        const images = this.images
        console.log(images)
        wx.previewImage({
          current:images[idx],  //当前预览的图片
          urls: images,  //所有要预览的图片
        })
      },
      upload(e) {
        var that = this;
        let i=0;
        let upLength;                        //图片数组长度
        let imgFilePaths;
        wx.chooseImage({
          count: 1 , // 默认9
          sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
          sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
          success: function(res) {
            // console.log(res)
            that.images=res.tempFilePaths[0];
            // // that. urlTobase64(res.tempFilePaths[0])
            // let len = that.files.concat(res.tempFilePaths);
            imgFilePaths = res.tempFilePaths;
            upLength = imgFilePaths.length;
            // if(len.length > max){
            //   that.$mptoast('图片最多只能选择' + max);
            //   return false;
            // }
            /**
             * 上传完成后把文件上传到服务器
             */
            wx.showLoading({
              title: '上传中...',
            })
            that.upLoad(imgFilePaths,i,upLength);
          }
        })
      },

      upLoad(imgPath,i,upLength){
        let that = this;
        let token=wx.getStorageSync('Authorization')
        //上传文件
        wx.uploadFile({
          url: `${host.host}/api/qiniu/upload`,
          filePath: imgPath[i],
          name: 'file',
          header: {
            "Content-Type": "multipart/form-data",
            "Authorization":`Bearer ${token}`
          },

          success: function (res) {
           that.$emit('getLogo',res.data)
          wx.showToast({
            title: '上传成功!',
            icon: 'success',
            duration: 2000,

          })
            // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
            // that.files = that.files.concat(imgPath[i]);        //合并图片显示数组
            // let imgData = JSON.parse(res.data);
            // that.upImg.push(imgData.data);

          },
          fail: function (res) {
            console.log(res);
            wx.hideLoading();
            wx.showModal({
              title: '错误提示',
              content: '上传图片失败',
              showCancel: false,
              success: function (res) { }
            })
          },
          // complete: function(){
          //   i++;
          //   if(i == upLength){
          //     wx.hideLoading();    //上传结束，隐藏loading
          //   }else{
          //     that.upLoad(imgPath,i,upLength);
          //   }
          // }
        });
      },

    }
  }
</script>
<style>
  .cartBox .weui-uploader__input-box{
    background-color: #fff;
  }
</style>
<style scoped>
    .cartBox.active{
        height:590rpx;
        transition: all 0.5s;
    }
    .cartBox.active ._van-icon{
        top:582rpx;
    }
    .cartBox ._van-icon{
        width: 20px;
        height: 20px;
        position:absolute;
        top:385rpx;
        right:48%;
    }
  .list{
    font-size: 26rpx;
    margin-top: 20rpx;
  }
  .list>li{
    display: flex;
    justify-content:flex-start;
    align-items: center;
    margin-bottom: 28rpx;
  }
  .list>li>img{
    width: 16px;
    height:16px;
    margin-right: 20rpx;
  }
  .weui-uploader__bd .weui-uploader__file_status:before{
    background-color:transparent ;
  }
  .cart_top{
    /*margin-bottom: 20rpx;*/
    /*display: flex;*/
    /*justify-content: space-between;*/
  }
  .cart_top .weui-uploader__input-box{
    width: 154rpx;
    height: 154rpx
  }
  .cartBox .weui-uploader__file{
    /*width:  120rpx;*/
    /*height: 120rpx;*/
    border-radius: 20rpx;
  }
  .cart_name{
    font-weight: bold;
  }
  .cartBox{
    width: 90%;
    height:400rpx ;
    /*background: #fff;*/
    margin:0 auto;
    /*background-color: #f7f7f7;*/
    font-size: 28rpx;
    border-radius: 10px;
    box-shadow: 5px 5px 5px #999;
    border: 1px solid #000;
    /*border: 5px solid rgb(61,176,243);*/
    /*border: 5px solid rgb(61,176,243);*/
    box-sizing: border-box;
    padding:28rpx;
    color: #fff;
    /*background:#f7f7f7 url("https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1577982769895&di=2b65bd6b72e73c15f936d4ddfedaaccf&imgtype=0&src=http%3A%2F%2Fbpic.588ku.com%2Fback_pic%2F03%2F52%2F00%2F6357931b6ead28e.jpg") no-repeat;*/
    background-image: url("https://img.xbdzmp.com/20200112010646ebd5b6556012.jpg");
    background-repeat: no-repeat;
    background-size: auto;
    /*display: flex;*/
    /*justify-content: flex-start;*/
  }
</style>
